<!-- 分页公共CSS -->
{css href="__STATIC__/admin/public/css/page-common__MIN__.css, __STATIC__/admin/public/jsdate/skin/jedate__MIN__.css" /}

{include file="bread" management="网站栏目管理" module="产品列表" /}

<div class="container">
    {include file="search" /}

    {include file="operation" /}

    <!-- 表格开始 -->
    <div class="table-wrap">
        <div class="table-container">
            <table class="table">
                <thead class="table-thead">
                    <tr class="table-tr">
                        <th class="table-th table-selection-wrap">
                            <input id="select_all" class="table-selection" type="checkbox" title="全选" />
                            <label class="table-label-selection" for="select_all" title="全选">
                                <i class="fas fa-check"></i>
                            </label>
                        </th>
                        <th class="table-th">编号</th>
                        <th class="table-th">缩略图</th>
                        <th class="table-th">名称</th>
                        <th class="table-th">内容</th>
                        <th class="table-th">打开方式</th>
                        <th class="table-th">发布时间</th>
                        <th class="table-th">排序</th>
                        <th class="table-th">状态</th>
                        <th class="table-th">操作</th>
                    </tr>
                </thead>
                <tbody class="table-tbody">
                    {empty name="datas"}<tr class="table-tr"><td class="table-td" colspan="100%">暂无数据</td></tr>{/empty}

                    {volist name="datas" id="row"}
                        <tr class="table-tr table-tr-{$row.id}">
                            <td class="table-td table-selection-wrap">
                                <input id="td-selection-{$row.id}" class="table-selection table-td-selection" type="checkbox" value="{$row.id}" title="选择" />
                                <label class="table-label-selection" for="td-selection-{$row.id}" title="选择"><i class="fas fa-check"></i></label>
                            </td>
                            <td class="table-td">{$row.id}</td>
                            <td class="table-td table-image-wrap">
                                {notempty name="$row.img"}<img class="table-image" src="__UPLOADS__/products/{$row.img}" alt="{$row.name}" title="{$row.name}" onclick="zoomInImage('__UPLOADS__/products/{$row.img}')" />{else /}暂无图片{/notempty}
                            </td>
                            <td class="table-td table-link-wrap">
                                <a class="table-link" href="{:Url('index/Products/read', array('id' => $row.id))}" target="_blank" title="{$row.name}">{$row.name}</a>
                            </td>
                            <td class="table-td">{$row.content|strip_tags|raw}</td>
                            <td class="table-td table-tag-wrap">
                                <div class="table-tag">{$row.target}</div>
                            </td>
                            <td class="table-td">{$row.create_time}</td>
                            <td class="table-td table-input-wrap">
                                <input class="table-input" type="number" min="1" max="300" value="{$row.sorting}" onfocus="sorting(this, 'focus')" onblur="sorting(this, 'blur', '{:Url('admin/Products/update_sorting', array('id' => $row.id))}')" />
                            </td>
                            <td class="table-td table-status-wrap">
                                <input id="td-status-{$row.id}" class="table-status" type="checkbox" title="状态" onclick="status(this, '{:Url('admin/Products/update_status', array('id' => $row.id))}')" {$row.status|filterCheckbox} />
                                <label class="table-label-status" for="td-status-{$row.id}" title="状态"></label>
                            </td>
                            <td class="table-td table-operation-wrap icon">
                                <i class="fas fa-pencil-alt" title="编辑" onclick="edit(this, '{:Url('admin/Products/update', array('id' => $row.id))}')"></i>
                                <i class="far fa-trash-alt" title="删除" onclick="onDelete(this, '{:Url('admin/Products/delete', array('id' => $row.id))}')"></i>
                            </td>
                        </tr>
                    {/volist}
                </tbody>
            </table>
        </div>
    </div>
    <!-- 表格结束 -->

    <!-- 分页开始 -->
    <div class="page-wrap">{$page|raw}</div>
    <!-- 分页结束 -->

    {include file="confirm" /}

    <!-- 表单模态框开始 -->
    <div id="form-modal_frame" class="modal_frame form">
        <div class="modal_frame-container form-modal_frame-container full_screen">
            <!-- 模态框头部开始 -->
            <div class="modal_frame-title-wrap form-modal_frame-title" ondblclick="toggleModalFrameFullScreen(event, $(this).find('.full_screen'))">
                <h4 class="modal_frame-title">产品</h4>
                <div class="modal_frame-btn-wrap">
                    <i class="fas fa-window-restore full_screen" onmousedown="toggleModalFrameFullScreen(event, this)"></i>
                    <i class="fas fa-times" onmousedown="hideModalFrame(event, '#form-modal_frame', true)"></i>
                </div>
            </div>
            <!-- 模态框头部结束 -->

            <!-- 模态框身体开始 -->
            <div class="modal_frame-body">
                <!-- 模态框表单开始 -->
                <form class="modal_frame-form" onsubmit="return false">
                    <div class="modal_frame-form-item file upload">
                        <label class="model_frame-form-label" for="file"><i class="model_frame-form-mandatory">*</i>产品图</label>
                        <input id="file" class="model_frame-form-input" type="file" name="file" accept="image/*" onchange="fileReader(this, '.modal_frame-form-item.rectangle', true)" />
                        <div class="modal_frame-form-upload-btn" onclick="$('#file').click()"><i class="fas fa-plus-circle"></i>上传图片</div>
                        <i class="far fa-times-circle"></i>
                        <i class="far fa-check-circle"></i>
                        <i class="model_frame-form-mandatory">*</i>
                        <span class="model_frame-form-remind">jpg/jpeg/png 常见图片格式</span>
                        <p class="modal_frame-form-prompt"></p>
                    </div>
                    <div class="modal_frame-form-item rectangle">
                        <label class="model_frame-form-label">缩略图</label>
                    </div>
                    <div class="modal_frame-form-item">
                        <label class="model_frame-form-label" for="name">名称</label>
                        <input id="name" class="model_frame-form-input" type="text" name="name" placeholder="请输入名称" autocomplete="off" />
                        <i class="far fa-times-circle"></i>
                        <i class="far fa-check-circle"></i>
                        <i class="model_frame-form-mandatory">*</i>
                        <span class="model_frame-form-remind">产品名称</span>
                        <p class="modal_frame-form-prompt"></p>
                    </div>
                    <div class="modal_frame-form-item radio">
                        <label class="model_frame-form-label"><i class="model_frame-form-mandatory">*</i>打开方式</label>
                        <div class="modal_frame-form-item-radio-wrap" title="本窗口打开">
                            <input id="target_self" class="modal_frame-form-item-radio" type="radio" name="target" class="radio-input" value="_self" checked />
                            <label class="modal_frame-form-item-radio-label"><i class="fas fa-check"></i></label>
                            <label class="modal_frame-form-item-radio-text_label" for="target_self">本窗口打开</label>
                        </div>
                        <div class="modal_frame-form-item-radio-wrap" title="新窗口打开">
                            <input id="target_blank" class="modal_frame-form-item-radio" type="radio" name="target" class="radio-input" value="_blank" />
                            <label class="modal_frame-form-item-radio-label"><i class="fas fa-check"></i></label>
                            <label class="modal_frame-form-item-radio-text_label" for="target_blank">新窗口打开</label>
                        </div>
                        <i class="model_frame-form-mandatory">*</i>
                        <span class="model_frame-form-remind">浏览器的打开方式</span>
                        <p class="modal_frame-form-prompt"></p>
                    </div>
                    <div class="modal_frame-form-item ueditor">
                        <label class="model_frame-form-label" for="parameter">参数</label>
                        <script id="parameter" class="model_frame-form-ueditor" type="text/plain" name="parameter"></script>
                    </div>
                    <div class="modal_frame-form-item ueditor">
                        <label class="model_frame-form-label" for="content">内容</label>
                        <script id="content" class="model_frame-form-ueditor" type="text/plain" name="content"></script>
                    </div>
                    <div class="modal_frame-form-item submit">
                        <button class="model_frame-form-submit" type="submit" title="提交" onclick="onSubmit(this)">提交</button>
                    </div>
                </form>
                <!-- 模态框表单结束 -->
            </div>
            <!-- 模态框身体结束 -->
        </div>

        <!-- 背景开始 -->
        <div class="background" onclick="hideModalFrame(event, '#form-modal_frame', true)"></div>
        <!-- 背景结束 -->
    </div>
    <!-- 表单模态框结束 -->

</div>

<!-- UEditor -->
{js href="__STATIC__/admin/public/ueditor/ueditor.config.js, __STATIC__/admin/public/ueditor/ueditor.all.js, __STATIC__/admin/public/jsdate/js/jedate.min.js, __STATIC__/admin/public/js/new-jsdate__MIN__.js" /}
<!-- 私有JS -->
<script type="text/babel" src="__STATIC__/admin/js/products__MIN__.js"></script>
<script type="text/babel">
    // 设置配置
    setConfig({
        // 上传资源路径
        UPLOADS: '__UPLOADS__/products/',
        // 上传地址
        UPLOADURL: '{:Url('admin/Products/upload')}'
    });
</script>